window.onload = function () {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "C3C3C3", 	//点颜色
        stroke: "EDEDED", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);


    let apiData = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ]

    apiData.forEach(function (v, i) {
        //给第一个添加active 其他不添加active
        if (i == 0) {
            getEle('#numList').innerHTML += `
            <li class="active">${v.times}次</li>
            `
        } else {
            getEle('#numList').innerHTML += `
            <li>${v.times}次</li>
            `
        }
    })


    //获取DOM节点 不要第一个
    let lis = getEleAll('#numList li:not(:first-child)')
    //遍历数组绑定事件
    lis.forEach(function (v, i) {
        tab('#numList li:not(:first-child)','active')
        v.addEventListener('click',function(){
            // //一刀切让所有带active类名的样式消除
            // lis.forEach(function(v){
            //     v.classList.remove('active')
            // })
            // //让点击的li获得active类名
            // this.classList.add('active')

            //把当前li对应的数值给到指定的地方
            getEle('#price').innerHTML=`￥${apiData[i].price}`
            getEle('#unitPrice').innerHTML=`${apiData[i].unitPrice}`
        })
    })






    
    // let menulis=getEleAll('#navBar li')
    // let cont=getEleAll('.main-left div')

    // menulis.forEach(function(v,i){
    //     v.addEventListener('click',function(){
    //         menulis.forEach(function(v,i){
    //             v.classList.remove('active')
    //             //清除所有div标签上面的on
    //             cont[i].classList.remove('on')
    //         })
    //         //给当前li添加类名active
    //         this.classList.add('active')
    //         //利用索引让li联系到div
    //         cont[i].classList.add('on')
    //     })
    // })

    tab('#navBar li','active','.main-left div','on')

}
